<?php
ob_start();
include_once "FrontendManager.php";
$db_frnmanager = new FrontendManager();
?>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Arquitectos Empresariales</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>	
	<div class="micontainer" style="padding-top: 50px;padding-bottom: 50px">        
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"></a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="index.php">INICIO</a></li>
					<li><a href="#">&iquest;QUI&Eacute;NES SOMOS?</a></li>
					<li><a href="mision.php">MISI&Oacute;N</a></li>
					<li><a href="vision.php">VISI&Oacute;N</a></li>
					<li class="dropdown">
						<a href="#" onclick='return modal();' class="dropdown-toggle" data-toggle="dropdown">SERVICIOS<b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li>
								<table>
									<tr>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Plan Estrategico de TI
													</a>
												</div>
												<p class="contenidoItemMenu">
													Realizar Análisis Estratégico de los de TI Alineadas al Negocio.Identificar Objetivos y Estrategias Servicios de TI.Realizar FODA de Recursos y 
												</p>
											</div>
										</td>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Procesos de TI y Organizaci&oacute;n de TI
													</a>
												</div>
												<p class="contenidoItemMenu">
													Evaluar y Dise&ntilde;ar Organizaci&oacute;n de TI Evaluar Habilidades y Competencias de Personal Actual Seleccionar y Evaluar de Personal para Posiciones Requeridas
												</p>
											</div>
										</td>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Area Servicios de TI
													</a>
												</div>
												<p class="contenidoItemMenu">
													Desarrollar Acuerdos de Servicios de TI.<br />
													Elaborar Encuestas de Satisfacci&oacute;n<br />
													de Clientes.<br />
													Desarrollar Modelo de Costos de los<br />
													Servicios de TI.
												</p>
											</div>
										</td>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Seguridad y Continuidad de Servicios de TI
													</a>
												</div>
												<p class="contenidoItemMenu">
													Desarrollar e Implementar Plan de <br/>
													Continuidad de TI. <br/>
													Desarrollar C&oacute;digo de Pr&aacute;ctica de <br/>
													Administraci&oacute;n de la Seguridad de TI. <br/>
													Desarrollar e Implementar Plan de <br/>
													Seguridad TI.
												</p>
											</div>
										</td>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Infraestructura y <br/>Aplicaciones
													</a>
												</div>
												<p class="contenidoItemMenu">
													Evaluar y Redise&ntilde;ar la Infraestructura<br />
													Tecnol&oacute;gica.<br />
													Evaluar Aplicaciones.
												</p>
											</div>
										</td>
									</tr>
									<tr>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Procesos del Negocio
													</a>
												</div>
												<p class="contenidoItemMenu">
													Evaluar Procesos Actuales.<br/>
												</p>
											</div>
										</td>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Riesgos de TI
													</a>
												</div>
												<p class="contenidoItemMenu">
													 
												</p>
											</div>
										</td>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Gobierno de Roles
													</a>
												</div>
												<p class="contenidoItemMenu">
													
												</p>
											</div>
										</td>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Gobierno de TI
													</a>
												</div>
												<p class="contenidoItemMenu">
													
												</p>
											</div>
										</td>
										<td class="cellClass">
											<div class="itemMenu">
												<div class="tituloItemMenu">
													<a href="" class="linkItemMenu">
														Evaluaci&oacute;n de ERP
													</a>
												</div>
												<p class="contenidoItemMenu">
													
												</p>
											</div>
										</td>
									</tr>
								</table>
							</li>													
						</ul>
					</li>
					<li><a href="articulos,php">ART&Iacute;CULOS</a></li>
					<li><a href="contacto.php">CONTACTO</a></li>
				</ul>
			</div><!-- /.navbar-collapse -->
		</nav>
		<!--Logo y slider-->
		<div>
			<table>
				<tr>
					<td>
						<img src="img/logo.png">
					</td>
					<!--slider-->
					<td >

						<div id="carousel-example-generic" class="carousel slide" style="width: 100%;">
							<!-- Wrapper for slides -->
							<div class="carousel-inner">
								<div class="item active">
									<img src="img/slider1.png" alt="imagen1">
									<div class="carousel-caption">
										<span>esta es la primera imagen</span>
									</div>
								</div>
								<div class="item">
									<img src="img/slider1.png" alt="imagen2">
									<div class="carousel-caption">
										<span>esta es la segunda imagen</span>
									</div>
								</div>
								<div class="item">
									<img src="img/slider1.png" alt="imagen3">
									<div class="carousel-caption">
										<span>esta es la tercera imagen</span>
									</div>
								</div>
							</div>

							<!-- Controls -->
							<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
								<span class="icon-prev"></span>
							</a>
							<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
								<span class="icon-next"></span>
							</a>
						</div>
					</td>
				</tr>
			</table>
		</div>

		<div style="width: 100%; height: 100%; padding-top: 25px;" >
			<!--contenido central-->
			<div id="contenido-izquierda"  style="float: left; height: 100%;">
				<table class="externals">
					<tr>
						<!--Paginas externas-->
						<td>
							<table>
								<tr>
									<td>
										<a href="#" class="link_menu_derecho" >
											Canal Interactivo de Debates y Foros
											<div class="flecha_menu" >
												<img src="img/flecha.png" alt="">
											</div>
										</a>
									</td>
								</tr>
								<tr>
									<td>
										<a href="#" class="link_menu_derecho">
											Canal de WebMeetings y Webconferences
											<div class="flecha_menu" >
												<img src="img/flecha.png" alt="">
											</div>
										</a>
									</td>
								</tr>
								<tr>
									<td>
										<a href="#" class="link_menu_derecho">
											Canal de Documentos Compartidos
											<div class="flecha_menu" >
												<img src="img/flecha.png" alt="">
											</div>
										</a>
									</td>
								</tr>
								<tr>
									<td>
										<a href="#" class="link_menu_derecho">
											Canal de presentaciones y Weminars
											<div class="flecha_menu" >
												<img src="img/flecha.png" alt="">
											</div>
										</a>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div> 
			<div id="contenido-central" style="float: left;  height: 100%;">
				<table style="border-collapse:separate; border-spacing: 25px;">

					<?php
							//generamos las categorias
					$result = $db_frnmanager -> getArticulosIndex();
							//El result se recorrer despues
					$contador = -1;
					$idCategorias = 0;

							while ($row = mysqli_fetch_array($result, MYSQL_NUM))//si solo se quiere recuperar una sola linea se usa if
							{
								$idCategorias++;
								$contador++;
								$bandera = false;
								if ($contador == 0) {
									echo "<tr>";
								}
								/*
								 <td>
							<div class="cajaArticuloIndex" >
								<div class="tituloArticuloIndex" >
									<label >La Mujer en TI</label><br>
									<small>Titulo del Articulo</small>
								</div>
								<div class="contenidoArticuloIndex">
									<img src="img/imagenRecientes.png">
									<p class="previewArticuloIndex">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, earum, officiis, quisquam voluptas nobis tempore blanditiis sunt explicabo eveniet quod laborum in commodi iste harum quia. Nulla rerum facere autem.
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolores assumenda magni vel ipsa molestiae animi! Sit, numquam, officia tempore error voluptate eius praesentium provident obcaecati ipsa quod dolores quia.
									</p>
								</div>
								<a href="#" ><img src="img/leer.png" alt="" class="linkLeer"></a>
							</div>

						</td>
								 */
						echo '<td>';
						echo '<div class="cajaArticuloIndex" >
						<div class="tituloArticuloIndex" >
							<label >'. $row[4] .'</label><br>
							<small>'. $row[1] . '</small>
						</div>
						<div class="contenidoArticuloIndex">
							';
							$mime = "image/png";
							$b64Src = "data:" . $mime . ";base64," . base64_encode($row[3]);
							echo '<img src="' . $b64Src . '" width="80" height="80" alt="" />';
							echo '<p class="previewArticuloIndex">';	
							echo $row[2] .' ...';
							echo '</p>
						</div>
						<a href="articulos.php?idArticulo='. $row[0] .'" ><img src="img/leer.png" alt="" class="linkLeer"></a>
					</div>
				</td>';		
				if ($contador == 1) {
					echo "</tr>";
					$bandera = true;
					$contador = -1;
				}
				if ($bandera) {
					echo "</tr>";
				}

			}
			?>
		</table>
	</div>
<div id="mainwrapper" style="float: left; height: 100%;"><!-- This #mainwrapper section contains all of our images to make them center and look proper in the browser ->  
	<!-- Image Caption 1 -->  
	<div id="box-1" class="box">  
		<img id="image-1" src="img/proyectoInnovacion.jpg" width="200"  height="182" />  
		<span class="caption simple-caption">  
			<p>Simple Caption</p>  
		</span>  
	</div>  
	<div id="box-1" class="box">  
		<img id="image-1" src="img/mejorgerente.jpg" width="200"  height="182" />  
		<span class="caption simple-caption">  
			<p>Simple Caption</p>  
		</span>  
	</div>
	<div id="box-1" class="box">  
		<img id="image-1" src="img/candidatos.jpg" width="200"  height="182" />  
		<span class="caption simple-caption">  
			<p>Simple Caption</p>  
		</span>  
	</div>
	<div id="box-1" class="box">  
		<img id="image-1" src="img/puestos.jpg" width="200"  height="182" />  
		<span class="caption simple-caption">  
			<p>Simple Caption</p>  
		</span>  
	</div>
</div>
</div>


</div>
<div class="panel-footer ">
	<table width="100%" >
		<tr>
			<td>
				<a href="http://www.facebook.com/"  target="_blank" > <img src="img/fb.png" title="Facebook" > </a>
				<a href="http://www.linkedin.com/"  target="_blank" ><img src="img/in.png" title="Linkedin" > </a>
				<a href="http://www.twitter.com/"  target="_blank" ><img src="img/tw.png" title="Twitter" ></a></td>
				<td style="color: #ffffff; ">
					<label>
						|
					</label>
				</td>
				<td>
					<label>
						P&aacute;ginas Hermanas:
					</label>
				</td>
				<td>
					<label>
						<a style="color: #ffffff; ">www.arquitectosempresariales.com</a>
					</label>
				</td>
				<td>
					<label>
						<a style="color: #ffffff; ">www.arquitectosempresariales.com</a>
					</label>
				</td>
				<td>
					<label>
						<a style="color: #ffffff; ">www.arquitectosempresariales.com</a>
					</label>
				</td>
			</tr>
		</table>
	</div>
	<!--begin parte de modal como funciona-->
	<div  id="displaybigbox" class="black_glass_transparent" style="display: none;" onclick='return modal();'></div>
	<div   id="display-como-funciona" class="elements_black_glass_transparent" style="display: none;"  >
		<div id="header-modal-como-funciona">
			<label>Como funciona ncuentro?</label>
			<br>				
		</div>			
	</div>
	<script type="text/javascript" src="js/script.js" ></script>
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/bootstrap.js" ></script>
</body>
</html>